<template>
    <div class="">
        <!-- 搜索 -->
        <el-card class="!border-none" shadow="never">
            <el-form ref="formRef" :model="queryParams" :inline="true">
                <!-- 订单号 -->
                <el-form-item label="订单号">
                    <el-input v-model="queryParams.order_sn" placeholder="请输入订单号" />
                </el-form-item>
                <!-- 借阅人姓名 -->
                <el-form-item label="借阅人姓名">
                    <el-input v-model="queryParams.name" placeholder="请输入借阅人姓名" />
                </el-form-item>
                <!-- 借阅人电话 -->
                <el-form-item label="借阅人电话">
                    <el-input v-model="queryParams.mobile" placeholder="请输入借阅人电话" />
                </el-form-item>
                <!-- 订单状态 -->
                <el-form-item label="订单状态">
                    <el-select v-model="queryParams.status" placeholder="请选择订单状态">
                        <el-option label="全部" value=""></el-option>
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <!-- 搜索操作 -->
                <el-form-item>
                    <el-button type="primary" :icon="Search" @click="resetPage">搜索</el-button>
                    <!-- <el-button @click="resetParams">重置</el-button> -->
                </el-form-item>
            </el-form>
        </el-card>
        <!-- 列表 -->
        <el-card class="!border-none mt-4" shadow="never">
            <!-- 新增 -->
            <!-- <div>
                <router-link
                    v-perms="[
                    'certificate.certificate/certificateAdd/add',
                    'certificate.certificate/certificateAdd/add:edit',
                    ]"
                    :to="{
                    path: getRoutePath(
                        'certificate.certificate/certificateAdd/add:edit'
                    ),
                    }"
                >
                    <el-button type="primary" class="mb-4">
                        <template #icon>
                            <icon name="el-icon-Plus" />
                        </template>
                        新增
                    </el-button>
                </router-link>
            </div> -->
            <!-- 表格 -->
            <el-table size="large" :data="pager.lists" border="true">
                <!-- ID -->
                <el-table-column label="订单ID" prop="order_id" width="180" align="center" />
                <!-- 图书信息 -->
                <el-table-column label="图书信息" width="280" align="center">
                    <template #default="{ row }">
                        <view class="img">
                            <view class=""
                                ><el-image class="order-img" :src="row.book.image"></el-image
                            ></view>
                            <view>{{ row.book.book_name }}</view>
                        </view>
                    </template>
                </el-table-column>
                <!-- 借阅人信息 -->
                <el-table-column label="借阅人信息" width="200" align="center">
                    <template #default="{ row }">
                        <span class="mg">{{ row.name }}</span
                        ><span>{{ row.mobile }}</span>
                    </template>
                </el-table-column>
                <!-- 状态 -->
                <el-table-column label="状态" width="200" align="center">
                    <template #default="{ row }">
                        <el-tag type="warning" v-if="row.status == 0">借阅中</el-tag>
                        <el-tag type="danger" v-if="row.status == 2">已逾期</el-tag>
                        <el-tag type="primary" v-if="row.status == 1">已归还</el-tag>
                    </template>
                </el-table-column>
                <!-- 借阅时间 -->
                <el-table-column label="借阅时间" prop="borrow_time" width="200" align="center" />
                <!-- 操作 -->
                <el-table-column label="操作" fixed="right" align="center">
                    <template #default="{ row }">
                        <el-button
                            v-perms="[
                                'orderManagement.orderManagement/details/add',
                                'orderManagement.orderManagement/details/add:edit'
                            ]"
                            type="primary"
                            link
                        >
                            <router-link
                                :to="{
                                    path: getRoutePath(
                                        'orderManagement.orderManagement/details/add:edit'
                                    ),
                                    query: { id: row.order_id }
                                }"
                            >
                                详情
                            </router-link>
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="flex justify-end mt-4">
                <pagination v-model="pager" @change="getLists" />
            </div>
        </el-card>
    </div>
</template>
<script lang="ts" setup name="articleLists">
import {
    // 列表接口
    orderList
} from '@/api/orderManagement'
import { Search } from '@element-plus/icons-vue'
import { getRoutePath } from '@/router'
import feedback from '@/utils/feedback'
import { usePaging } from '@/hooks/usePaging'
const queryParams = reactive({
    order_sn: '',
    name: '',
    mobile: '',
    status: ''
})
const options = [
    {
        value: '0',
        label: '借阅中'
    },
    {
        value: '1',
        label: '已归还'
    },
    {
        value: '2',
        label: '已逾期'
    }
]
const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: orderList,
    params: queryParams
})
getLists()
</script>
<style>
.img {
    display: flex;
    flex-direction: column;
}
.order-img {
    width: 120px;
    height: 120px;
}
</style>
